/*
 * @Author: Await
 * @Date: 2025-05-09 11:45:00
 * @LastEditors: Await
 * @LastEditTime: 2025-05-12 17:28:18
 * @Description: 图表渲染核心组件
 */

import React, { useRef, useEffect, useState, useCallback } from 'react';
import { ChartRendererProps, Series } from './types';
import useChart from './useChart';
import ChartLoading from './ChartLoading';
import * as echarts from 'echarts';
import { ensureEChartsGLLoaded, is3DChartType, forceReloadGLLibrary } from '../../../utils/chart/3dChartUtils';
import { validateAndFixConfig, needsCartesianCoords, getDefaultAxisConfig } from './chartTypeUtils';
import { logDebug } from '../../../utils/chart/commonUtils';

/**
 * 为3D图表应用配置前进行额外处理
 * @param instance ECharts实例
 * @param cfg 图表配置
 */
const applyConfigToChart = (instance: echarts.ECharts, cfg: any) => {
    if (!instance || instance.isDisposed() || !cfg) return;

    // 检查是否是3D图表
    const is3DChart = is3DChartType(cfg.type || '');

    if (is3DChart) {
        console.log('应用3D图表配置前预处理');

        // 确保3D配置完整
        try {
            // 深度克隆配置，避免修改原始对象
            const enhancedConfig = JSON.parse(JSON.stringify(cfg));

            // 特殊处理bar3D的显示问题
            if (cfg.type === 'bar3D') {
                console.log('优化bar3D配置');

                // 确保每个系列都有合适的渲染配置
                if (Array.isArray(enhancedConfig.series)) {
                    enhancedConfig.series.forEach((series: any) => {
                        if (series.type === 'bar3D') {
                            // 设置更合适的渲染方式
                            series.shading = series.shading || 'realistic';

                            // 如果没有itemStyle，创建默认值
                            if (!series.itemStyle) {
                                series.itemStyle = {};
                            }

                            // 优化材质属性
                            series.itemStyle.opacity = series.itemStyle.opacity || 0.8;
                            // 增加金属感和粗糙度
                            series.itemStyle.metalness = series.itemStyle.metalness || 0.4;
                            series.itemStyle.roughness = series.itemStyle.roughness || 0.5;
                        }
                    });
                }

                // 增强光照配置
                if (!enhancedConfig.light) {
                    enhancedConfig.light = {};
                }

                // 配置主光源
                enhancedConfig.light.main = enhancedConfig.light.main || {};
                enhancedConfig.light.main.intensity = enhancedConfig.light.main.intensity || 1.5;
                enhancedConfig.light.main.shadow = true;
                enhancedConfig.light.main.alpha = enhancedConfig.light.main.alpha || 30;
                enhancedConfig.light.main.beta = enhancedConfig.light.main.beta || 40;

                // 配置环境光
                enhancedConfig.light.ambient = enhancedConfig.light.ambient || {};
                enhancedConfig.light.ambient.intensity = enhancedConfig.light.ambient.intensity || 0.5;
            }

            // 应用增强配置
            instance.setOption(enhancedConfig, true);
            return;
        } catch (e) {
            console.error('3D配置增强失败:', e);
        }
    }

    // 默认配置应用
    instance.setOption(cfg, true);
};

/**
 * 图表渲染错误类型
 */
interface RenderError {
    message: string;
    details: string;
}

// 在ExtendedECharts接口中添加__previousType属性
// 添加在现有接口声明之后
interface ExtendedECharts extends echarts.ECharts {
    __previousType?: string;
}

/**
 * 图表渲染核心组件
 * 负责图表的DOM渲染和实例管理
 */
const ChartRenderer: React.FC<ChartRendererProps> = ({
    option,
    theme,
    renderer = 'canvas',
    width = '100%',  // 默认宽度100%
    height = '100%', // 默认高度100%
    loading = false,
    onChartReady,
    onEvents,
    className,
    style,
    onError
}) => {
    // 图表容器引用 - 使用非空断言，确保引用不为null
    const chartRef = useRef<HTMLDivElement>(null!);

    // 渲染错误状态
    const [renderError, setRenderError] = useState<RenderError | null>(null);
    // 添加3D加载状态
    const [is3DLoading, setIs3DLoading] = useState<boolean>(false);
    // 跟踪初始化状态
    const initialLoadingRef = useRef<boolean>(false);
    // 3D图表准备完成状态
    const [is3DReady, setIs3DReady] = useState<boolean>(false);
    // 跟踪当前图表是否是3D图表
    const [isCurrent3D, setIsCurrent3D] = useState<boolean>(false);
    // 上一次图表类型
    const previousChartTypeRef = useRef<string>('');

    // 控制图表DOM元素可见性
    const [chartVisible, setChartVisible] = useState<boolean>(true);
    // 跟踪图表实例重建状态
    const isRebuildingRef = useRef<boolean>(false);

    // 使用自定义Hook管理图表实例
    const {
        chartInstance,
        setOption,
        resize,
        showLoading,
        hideLoading,
        is3D,
        recreateInstance // 添加重建实例函数
    } = useChart({
        chartRef,
        theme,
        renderer,
        onChartReady,
        onEvents,
    }) as {
        chartInstance: ExtendedECharts | null;
        setOption: (option: any, notMerge?: boolean) => void;
        resize: () => void;
        showLoading: (text?: string) => void;
        hideLoading: () => void;
        is3D: boolean;
        recreateInstance: () => Promise<echarts.ECharts | null>; // 添加重建实例函数
    };

    // 上一次应用的选项引用，用于避免循环重渲染
    const lastOptionRef = useRef(null);

    // 用于跟踪初始化渲染是否已完成
    const initialRenderRef = useRef(false);

    // 跟踪初始化次数，用于防止无限循环
    const initializationCountRef = useRef(0);

    // 保存上一次应用的配置，用于比较
    const lastFinalConfigRef = useRef<any>(null);

    // 跟踪图表重建次数
    const rebuildCountRef = useRef<number>(0);

    // 跟踪图表类型切换历史
    const chartTypeHistoryRef = useRef<string[]>([]);

    // 辅助函数：转换自定义axis格式到ECharts需要的格式
    const convertAxisConfig = (option: any): any => {
        if (!option || !option.axis) {
            return option;
        }

        // 创建配置副本
        const result = { ...option };
        const { axis } = result;

        // 初始化xAxis和yAxis对象，如果不存在的话
        if (!result.xAxis) {
            result.xAxis = { type: 'category' };
        } else if (typeof result.xAxis === 'object' && !Array.isArray(result.xAxis)) {
            // 保留已有配置
        } else {
            // 如果是数组或其他格式，转为对象
            result.xAxis = { type: 'category' };
        }

        if (!result.yAxis) {
            result.yAxis = { type: 'value' };
        } else if (typeof result.yAxis === 'object' && !Array.isArray(result.yAxis)) {
            // 保留已有配置
        } else {
            // 如果是数组或其他格式，转为对象
            result.yAxis = { type: 'value' };
        }

        // 转换xAxis配置
        if (axis.xAxisLabel) {
            result.xAxis.axisLabel = { ...axis.xAxisLabel };
            console.log('应用X轴标签配置:', result.xAxis.axisLabel);
        }

        if (axis.xAxisLine) {
            result.xAxis.axisLine = { ...axis.xAxisLine };
            console.log('应用X轴轴线配置:', result.xAxis.axisLine);
        }

        if (axis.xAxisTick) {
            result.xAxis.axisTick = { ...axis.xAxisTick };
            console.log('应用X轴刻度配置:', result.xAxis.axisTick);
        }

        if (axis.xSplitLine) {
            result.xAxis.splitLine = { ...axis.xSplitLine };
            console.log('应用X轴分隔线配置:', result.xAxis.splitLine);
        }

        if (axis.xAxisName) {
            // 转换坐标轴名称到ECharts的name和nameTextStyle
            if (axis.xAxisName.show) {
                // 只有当show为true时才设置name属性
                result.xAxis.name = axis.xAxisName.text || '';
                result.xAxis.nameLocation = axis.xAxisName.location || 'middle';
                result.xAxis.nameTextStyle = axis.xAxisName.textStyle || {};
                console.log('应用X轴名称配置:', axis.xAxisName);
            } else {
                // 如果show为false，确保name属性为空
                result.xAxis.name = '';
                console.log('X轴名称已隐藏');
            }
        }

        if (axis.xAxisGeneral) {
            // 直接应用所有高级设置，确保优先级高于默认设置
            Object.keys(axis.xAxisGeneral).forEach(key => {
                // 避免覆盖标签、轴线、刻度和分隔线的详细配置
                if (!['axisLabel', 'axisLine', 'axisTick', 'splitLine'].includes(key)) {
                    result.xAxis[key] = axis.xAxisGeneral[key];
                    // 对于一些关键属性，添加日志
                    if (['type', 'position', 'inverse', 'scale', 'min', 'max'].includes(key)) {
                        console.log(`应用X轴高级设置 ${key}:`, axis.xAxisGeneral[key]);
                    }
                }
            });
            console.log('应用X轴高级配置完成');
        }

        // 转换yAxis配置
        if (axis.yAxisLabel) {
            result.yAxis.axisLabel = { ...axis.yAxisLabel };
            console.log('应用Y轴标签配置:', result.yAxis.axisLabel);
        }

        if (axis.yAxisLine) {
            result.yAxis.axisLine = { ...axis.yAxisLine };
            console.log('应用Y轴轴线配置:', result.yAxis.axisLine);
        }

        if (axis.yAxisTick) {
            result.yAxis.axisTick = { ...axis.yAxisTick };
            console.log('应用Y轴刻度配置:', result.yAxis.axisTick);
        }

        if (axis.ySplitLine) {
            result.yAxis.splitLine = { ...axis.ySplitLine };
            console.log('应用Y轴分隔线配置:', result.yAxis.splitLine);
        }

        if (axis.yAxisName) {
            // 转换坐标轴名称到ECharts的name和nameTextStyle
            if (axis.yAxisName.show) {
                // 只有当show为true时才设置name属性
                result.yAxis.name = axis.yAxisName.text || '';
                result.yAxis.nameLocation = axis.yAxisName.location || 'middle';
                result.yAxis.nameTextStyle = axis.yAxisName.textStyle || {};
                console.log('应用Y轴名称配置:', axis.yAxisName);
            } else {
                // 如果show为false，确保name属性为空
                result.yAxis.name = '';
                console.log('Y轴名称已隐藏');
            }
        }

        if (axis.yAxisGeneral) {
            // 直接应用所有高级设置，确保优先级高于默认设置
            Object.keys(axis.yAxisGeneral).forEach(key => {
                // 避免覆盖标签、轴线、刻度和分隔线的详细配置
                if (!['axisLabel', 'axisLine', 'axisTick', 'splitLine'].includes(key)) {
                    result.yAxis[key] = axis.yAxisGeneral[key];
                    // 对于一些关键属性，添加日志
                    if (['type', 'position', 'inverse', 'scale', 'min', 'max'].includes(key)) {
                        console.log(`应用Y轴高级设置 ${key}:`, axis.yAxisGeneral[key]);
                    }
                }
            });
            console.log('应用Y轴高级配置完成');
        }

        return result;
    };

    // 配置JSON字符串引用，用于深度比较
    const optionJsonRef = useRef('');

    // 记录最后一次应用配置的时间戳，用于控制频率
    const lastOptionApplyTimeRef = useRef(0);

    // 添加默认图表配置
    const defaultConfigRef = useRef({
        // 添加明确的图表类型
        type: 'bar',
        title: {
            text: '点击左侧图表类型开始配置',
            left: 'center',
            top: 'middle',
            textStyle: {
                fontSize: 16,
                color: '#666'
            }
        },
        grid: {
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['类别1', '类别2', '类别3', '类别4', '类别5']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            // 确保明确指定type，避免"Unknown series undefined"错误
            type: 'bar',
            data: [10, 20, 30, 40, 50],
            // 添加名称便于识别
            name: '默认数据'
        }]
    });

    // 图表错误处理函数
    const handleChartError = useCallback((error: unknown) => {
        console.error('图表渲染错误:', error);

        let errorMessage = '图表渲染失败';
        let errorDetails = '未知错误';

        if (error instanceof Error) {
            errorMessage = error.message;
            errorDetails = error.stack || '无堆栈信息';
        } else if (typeof error === 'string') {
            errorMessage = error;
        } else if (error && typeof error === 'object') {
            errorMessage = String(error);
        }

        // 添加上下文信息
        const contextInfo = {
            chartType: option?.type || '未知',
            is3D: is3DChartType(option?.type || ''),
            is3DReady: is3DReady,
            is3DLoading: is3DLoading,
            hasChartInstance: !!chartInstance,
            instanceDisposed: chartInstance ? chartInstance.isDisposed() : true,
            windowECharts: !!(window as any).echarts,
            hasGLComponent: !!(window as any).echarts?.gl,
            containerSize: chartRef.current ? {
                width: chartRef.current.clientWidth,
                height: chartRef.current.clientHeight
            } : null
        };

        console.error('图表错误上下文:', contextInfo);

        setRenderError({
            message: `${errorMessage} (图表类型: ${option?.type || '未知'})`,
            details: `${errorDetails}\n\n诊断信息: ${JSON.stringify(contextInfo, null, 2)}`
        });

        // 如果有外部错误处理回调，调用它
        if (onError) {
            onError(errorMessage);
        }

        if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
            console.warn('非生产环境下 - 检测到图表配置错误，尝试修复:', error);
        }
    }, [option, is3DReady, is3DLoading, chartInstance, onError, chartRef]);

    // 处理图表类型特殊情况
    useEffect(() => {
        // 如果没有图表实例，配置无效，或者组件在加载中，则直接退出
        if (!chartInstance || !option) {
            return;
        }

        // 图表类型检测：
        const currentType = option.type || '';
        const prevType = previousChartTypeRef.current;

        // 如果类型没有变化，不进行后续处理，避免无限循环
        if (currentType === prevType && prevType !== '') {
            return;
        }

        const currentIs3D = is3DChartType(currentType);
        const prevIs3D = is3DChartType(prevType);

        // 记录图表类型历史
        if (currentType && currentType !== prevType) {
            chartTypeHistoryRef.current.push(currentType);
            if (chartTypeHistoryRef.current.length > 10) {
                chartTypeHistoryRef.current.shift();
            }
            console.log('[切换历史] 图表类型变更:', prevType, '->', currentType);
            console.log('[切换历史] 历史记录:', chartTypeHistoryRef.current);
        }

        // 检测是否是同一个3D图表类型之间切换
        const isChangingBetween3D = currentIs3D && prevIs3D && prevType !== currentType;
        const isChangingFrom2Dto3D = currentIs3D && !prevIs3D;
        const isChangingFrom3Dto2D = !currentIs3D && prevIs3D;

        // 图表类型变化标志
        const isChartTypeChanging = (isChangingBetween3D || isChangingFrom2Dto3D || isChangingFrom3Dto2D) && prevType !== '';

        // 只有在类型真正变化时才输出日志
        if (isChartTypeChanging || (currentType && currentType !== prevType)) {
            console.log('图表类型变更检测：', {
                currentType,
                prevType,
                currentIs3D,
                prevIs3D,
                isChangingBetween3D,
                isChangingFrom2Dto3D,
                isChangingFrom3Dto2D,
                isChartTypeChanging
            });
        }

        // 如果图表类型变化，特别是在2D/3D之间切换或在不同3D图表类型之间切换
        if (isChartTypeChanging && !isRebuildingRef.current) {
            console.log(`图表维度切换: ${isChangingFrom3Dto2D ? '3D->2D' : isChangingFrom2Dto3D ? '2D->3D' : '3D->3D'} (${prevType || '无'} -> ${currentType})`);

            // 设置状态
            setIsCurrent3D(currentIs3D);
            previousChartTypeRef.current = currentType;
            isRebuildingRef.current = true;
            rebuildCountRef.current += 1;

            // 强制清理和重新加载3D库的完整流程函数
            const handleFullRebuild = async () => {
                try {
                    console.log('开始强制重建图表实例');

                    // 特殊处理从3D切换到2D的情况
                    if (isChangingFrom3Dto2D) {
                        // 从3D切换到2D时，强制清理GL组件并完全重置图表
                        try {
                            console.log('3D→2D: 彻底清理GL环境');

                            // 记录当前配置，用于重建后应用
                            const configToApplyAfterRebuild = option;

                            // 先完全销毁当前实例
                            if (chartInstance && !chartInstance.isDisposed()) {
                                chartInstance.clear();
                                chartInstance.dispose();
                            }

                            // 清理DOM容器
                            if (chartRef.current) {
                                chartRef.current.innerHTML = '';
                            }

                            // 清理全局ECharts实例
                            const echarts = (window as any).echarts;
                            if (echarts && typeof echarts.dispose === 'function') {
                                try {
                                    // 优先使用安全的方式清理
                                    if (echarts.getInstanceByDom && Object.values(echarts.instances || {}).length > 0) {
                                        // 逐个清理实例
                                        Object.values(echarts.instances || {}).forEach((instance: any) => {
                                            if (instance && !instance.isDisposed && !instance.isDisposed()) {
                                                try {
                                                    instance.dispose();
                                                } catch (err) {
                                                    console.warn('[重建] 无法清理单个实例:', err);
                                                }
                                            }
                                        });
                                        console.log('[重建] 已清理所有实例');
                                    } else {
                                        // 后备方案
                                        echarts.dispose();
                                    }
                                } catch (e) {
                                    console.warn('[3D→2D] 实例清理过程中出现错误:', e);
                                }
                            }

                            // 清理GL相关对象引用
                            if (echarts) {
                                try {
                                    if (echarts.gl) {
                                        console.log('清理echarts.gl对象');
                                        delete echarts.gl;
                                    }

                                    // 清理gl相关组件注册
                                    if (echarts.componentsMap) {
                                        for (const key of Array.from(echarts.componentsMap.keys())) {
                                            if (key.includes('3D') || key.includes('GL')) {
                                                console.log(`清理组件: ${key}`);
                                                echarts.componentsMap.delete(key);
                                            }
                                        }
                                    }
                                } catch (e) {
                                    console.warn('清理GL组件注册失败:', e);
                                }
                            }

                            // 强制进行垃圾回收（尽可能）
                            if ((window as any).gc) {
                                try {
                                    (window as any).gc();
                                } catch (e) {
                                    // 忽略错误
                                }
                            }

                            // 等待短暂延迟，确保DOM更新
                            await new Promise(resolve => setTimeout(resolve, 150));

                            // 使用fallbackTo2D确保正确转换配置
                            // 从useChart.ts导入fallbackTo2DConfig
                            const { fallbackTo2DConfig } = await import('./fallbackTo2DConfig');
                            const convertedConfig = fallbackTo2DConfig(configToApplyAfterRebuild);

                            // 主动开始重建并应用转换后的配置
                            setTimeout(async () => {
                                try {
                                    // 重建图表实例
                                    console.log('3D→2D: 开始重建图表实例');
                                    const newInstance = await recreateInstance();

                                    // 增加延迟确保实例完全初始化
                                    await new Promise(resolve => setTimeout(resolve, 200));

                                    // 应用转换后的2D配置
                                    if (newInstance && !newInstance.isDisposed()) {
                                        console.log('3D→2D: 应用转换后的2D配置');

                                        // 应用验证过的2D配置
                                        const validConfig = validateAndFixConfig(convertedConfig);
                                        newInstance.setOption(validConfig, true);

                                        console.log('3D→2D: 配置应用完成，执行resize');
                                        newInstance.resize();

                                        // 恢复图表可见性
                                        setChartVisible(true);
                                        setIs3DLoading(false);

                                        // 隐藏加载动画
                                        hideLoading();

                                        // 重置重建状态
                                        isRebuildingRef.current = false;

                                        // 更新图表类型
                                        previousChartTypeRef.current = convertedConfig.type || 'line';
                                    } else {
                                        // 实例创建失败或已销毁，尝试回退处理
                                        console.error('3D→2D: 重建实例失败或实例已销毁');

                                        // 尝试使用备用方法创建图表
                                        try {
                                            console.log('3D→2D: 尝试使用备用方法创建图表');
                                            if (chartRef.current) {
                                                // 确保容器存在并已清空
                                                chartRef.current.innerHTML = '';

                                                // 获取容器原始尺寸
                                                const originalWidth = chartRef.current.clientWidth || 1200;
                                                const originalHeight = chartRef.current.clientHeight || 800;
                                                logDebug(`3D→2D: 恢复容器原始尺寸 - 宽度: ${originalWidth}px, 高度: ${originalHeight}px`);

                                                // 设置明确的尺寸，使用原始尺寸而非固定值
                                                chartRef.current.style.width = `${originalWidth}px`;
                                                chartRef.current.style.height = `${originalHeight}px`;
                                                chartRef.current.style.display = 'block';

                                                // 强制布局计算
                                                chartRef.current.getBoundingClientRect();

                                                // 直接使用echarts.init创建新实例，使用原始尺寸
                                                const echarts = (window as any).echarts;
                                                if (echarts && typeof echarts.init === 'function') {
                                                    // 使用SVG渲染器可能更稳定
                                                    const backupInstance = echarts.init(chartRef.current, theme, {
                                                        renderer: 'svg',
                                                        width: originalWidth,
                                                        height: originalHeight
                                                    });

                                                    if (backupInstance) {
                                                        console.log('3D→2D: 成功创建备用实例');
                                                        // 应用简化的配置
                                                        const simpleConfig = {
                                                            ...validateAndFixConfig(convertedConfig),
                                                            animation: false // 禁用动画可能更稳定
                                                        };
                                                        backupInstance.setOption(simpleConfig, true);

                                                        // 确保图表填满容器
                                                        setTimeout(() => {
                                                            if (backupInstance && !backupInstance.isDisposed()) {
                                                                backupInstance.resize();
                                                            }
                                                        }, 100);

                                                        // 恢复UI状态
                                                        setChartVisible(true);
                                                        setIs3DLoading(false);
                                                        hideLoading();
                                                        isRebuildingRef.current = false;
                                                        previousChartTypeRef.current = convertedConfig.type || 'line';

                                                        // 尝试通知外部
                                                        if (onChartReady) {
                                                            onChartReady(backupInstance as echarts.ECharts);
                                                        }

                                                        return; // 成功恢复，提前返回
                                                    }
                                                }
                                            }
                                        } catch (backupError) {
                                            console.error('3D→2D: 备用方法失败:', backupError);
                                        }

                                        // 如果备用方法也失败，只恢复UI状态
                                        console.log('3D→2D: 无法创建图表实例，只恢复UI状态');
                                        setChartVisible(true);
                                        setIs3DLoading(false);
                                        hideLoading();
                                        isRebuildingRef.current = false;

                                        // 报告错误但不抛出异常
                                        handleChartError(new Error('从3D到2D切换失败，无法创建新实例，已恢复UI状态'));
                                    }
                                } catch (error) {
                                    console.error('3D→2D: 重建或应用配置失败:', error);

                                    // 恢复UI状态，确保用户界面不会卡住
                                    setChartVisible(true);
                                    setIs3DLoading(false);
                                    hideLoading();
                                    isRebuildingRef.current = false;

                                    // 报告错误
                                    handleChartError(error);
                                }
                            }, 100);

                            // 提前返回，不执行后续的重建流程，由我们自己控制重建
                            return;
                        } catch (e) {
                            console.warn('清理GL环境时出错:', e);
                            // 出错时继续执行默认流程
                        }
                    } else if (currentIs3D) {
                        // 对于3D图表，触发必要的事件，但不再需要重载GL库
                        console.log('3D图表：触发GL库加载事件');
                        setIs3DLoading(true);

                        try {
                            // 触发但不实际重载GL库，只触发事件
                            await forceReloadGLLibrary(true);
                            console.log('GL库事件已触发');

                            // 增加短暂延迟，确保事件处理完成
                            await new Promise(resolve => setTimeout(resolve, 100));
                        } catch (err) {
                            console.error('触发GL库事件失败:', err);
                        }
                    }

                    // 重建图表实例
                    console.log('开始重建图表实例');
                    const newInstance = await recreateInstance();

                    // 增加延迟，确保新实例完全初始化
                    await new Promise(resolve => setTimeout(resolve, 100));

                    // 在进行图表重建前，确保3D图表配置正确
                    if (currentIs3D && newInstance) {
                        console.log('3D图表：确保GL组件已注册');
                        try {
                            // 手动触发GL组件初始化
                            const echarts = (window as any).echarts;
                            if (echarts && echarts.gl) {
                                console.log('确认GL组件存在：', Object.keys(echarts.gl));

                                // 检查并重新触发GL组件注册
                                if (typeof echarts.registerMap === 'function' &&
                                    (!echarts.componentsMap || !echarts.componentsMap.has('grid3D'))) {
                                    console.log('手动触发GL组件注册');
                                    // 触发任意3D组件相关操作，强制ECharts注册GL组件
                                    const dummyOption = {
                                        grid3D: {},
                                        xAxis3D: { type: 'value' },
                                        yAxis3D: { type: 'value' },
                                        zAxis3D: { type: 'value' },
                                        series: [{
                                            type: 'scatter3D',
                                            data: [[0, 0, 0]]
                                        }]
                                    };

                                    // 创建临时DOM并初始化实例，确保GL组件被注册
                                    const tempDiv = document.createElement('div');
                                    tempDiv.style.display = 'none';
                                    document.body.appendChild(tempDiv);
                                    const tempChart = echarts.init(tempDiv);
                                    tempChart.setOption(dummyOption);
                                    setTimeout(() => {
                                        tempChart.dispose();
                                        document.body.removeChild(tempDiv);
                                    }, 100);
                                }
                            }
                        } catch (e) {
                            console.warn('手动触发GL组件初始化失败:', e);
                        }
                    }

                    // 图表重建后的处理
                    setTimeout(() => {
                        try {
                            if (newInstance && !newInstance.isDisposed() && option) {
                                // 应用图表配置
                                console.log('应用配置到新图表实例');
                                const validConfig = validateAndFixConfig(option);

                                // 确保浏览器有时间进行渲染和布局更新
                                requestAnimationFrame(() => {
                                    if (newInstance && !newInstance.isDisposed()) {
                                        // 先执行resize确保容器尺寸正确
                                        newInstance.resize();

                                        // 应用配置时使用notMerge=true，确保完全覆盖旧配置
                                        applyConfigToChart(newInstance, validConfig);

                                        // 再次执行resize，确保3D场景渲染正确
                                        setTimeout(() => {
                                            if (newInstance && !newInstance.isDisposed()) {
                                                newInstance.resize();
                                            }
                                        }, 100);

                                        // 恢复图表可见性
                                        setChartVisible(true);
                                        setIs3DLoading(false);
                                        setIs3DReady(true);

                                        // 隐藏加载动画
                                        hideLoading();

                                        // 如果是3D图表，添加额外的状态检查
                                        if (currentIs3D) {
                                            // 延迟检查图表是否确实渲染了
                                            setTimeout(() => {
                                                try {
                                                    // 检查canvas是否存在3D内容
                                                    const canvas = chartRef.current?.querySelector('canvas');
                                                    if (canvas && canvas.width > 0 && canvas.height > 0) {
                                                        console.log('3D图表canvas已创建，尺寸:', {
                                                            width: canvas.width,
                                                            height: canvas.height
                                                        });

                                                        // 触发额外的resize可以帮助某些3D图表完成渲染
                                                        if (newInstance && !newInstance.isDisposed()) {
                                                            newInstance.resize();
                                                        }
                                                    } else {
                                                        console.warn('3D图表canvas未创建或尺寸为0');
                                                    }
                                                } catch (e) {
                                                    console.error('3D图表渲染后检查失败:', e);
                                                }
                                            }, 300);
                                        }

                                        // 针对从3D切换到2D的特殊处理
                                        if (isChangingFrom3Dto2D) {
                                            // 提供额外的强制刷新机会
                                            setTimeout(() => {
                                                if (newInstance && !newInstance.isDisposed()) {
                                                    try {
                                                        console.log('3D→2D: 额外刷新图表');
                                                        // 确保我们有最新的有效配置
                                                        const refreshConfig = validateAndFixConfig(option);
                                                        // 使用notMerge=true强制完全重新渲染
                                                        newInstance.setOption(refreshConfig, true);
                                                        // 调整大小确保正确显示
                                                        newInstance.resize();
                                                    } catch (e) {
                                                        console.error('额外刷新图表失败:', e);
                                                    }
                                                }
                                            }, 500);
                                        }
                                    }
                                });

                                // 重置重建状态
                                isRebuildingRef.current = false;
                            }
                        } catch (error) {
                            console.error('应用配置到重建实例失败:', error);
                            // 恢复图表可见性，但显示错误状态
                            setChartVisible(true);
                            setIs3DLoading(false);
                            hideLoading();
                            isRebuildingRef.current = false;
                            handleChartError(error);
                        }
                    }, 300);  // 增加延迟，确保GL组件完全初始化
                } catch (error) {
                    console.error('图表重建过程失败:', error);
                    // 恢复图表可见性，但显示错误状态
                    setChartVisible(true);
                    setIs3DLoading(false);
                    hideLoading();
                    isRebuildingRef.current = false;
                    handleChartError(error);
                }
            };

            // 3D图表类型之间切换处理优化
            if (isChangingBetween3D) {
                // 同类3D图表类型之间切换时，不需要隐藏图表，不需要强制重建实例
                console.log('3D图表类型之间切换，简化处理流程');

                // 显示加载动画，但不隐藏图表
                showLoading('更新3D图表...');

                // 使用Promise和async/await处理异步操作
                (async () => {
                    try {
                        // 确保GL组件已加载但不重建实例
                        await forceReloadGLLibrary(true);

                        // 验证和修复当前配置
                        const validConfig = validateAndFixConfig(option);

                        // 应用新配置到现有实例
                        if (chartInstance && !chartInstance.isDisposed()) {
                            // 先执行resize确保容器尺寸正确
                            chartInstance.resize();

                            // 应用配置
                            applyConfigToChart(chartInstance, validConfig);

                            // 再次执行resize，确保3D场景渲染正确
                            setTimeout(() => {
                                if (chartInstance && !chartInstance.isDisposed()) {
                                    chartInstance.resize();
                                }
                            }, 100);

                            // 确保3D图表状态正确
                            setIs3DReady(true);
                            setIs3DLoading(false);

                            // 隐藏加载动画
                            hideLoading();
                        }

                        // 重置重建状态
                        isRebuildingRef.current = false;
                    } catch (error) {
                        console.error('3D图表类型切换失败:', error);
                        // 如果简化处理失败，回退到完整重建流程
                        handleFullRebuild();
                    }
                })();

                return; // 提前返回，不执行完整重建流程
            }

            // 隐藏图表容器，准备重建（仅对2D/3D切换或首次3D）
            setChartVisible(false);

            // 显示加载动画
            if (currentIs3D) {
                showLoading('准备3D图表环境...');
            } else {
                showLoading('重新构建图表...');
            }

            // 执行重建过程
            handleFullRebuild();
        } else if (currentType && currentType !== prevType) {
            // 记录当前类型，但不需要完全重建
            previousChartTypeRef.current = currentType;
        }

        // 监听GL库状态变化事件
        const handleGLLoaded = (event: Event) => {
            console.log('监听到GL库加载完成事件:', (event as any).detail || {});
            setIs3DReady(true);
            setIs3DLoading(false);

            // 确保当前是3D图表时重新应用配置
            if (chartInstance && !chartInstance.isDisposed() && option && currentIs3D) {
                try {
                    console.log('GL库加载完成，重新应用3D配置');
                    const validConfig = validateAndFixConfig(option);
                    // 使用增强版配置应用函数
                    applyConfigToChart(chartInstance, validConfig);
                    // 恢复图表可见性
                    setChartVisible(true);
                } catch (err) {
                    console.error('GL库加载后应用配置失败:', err);
                }
            }
        };

        // 监听GL库重载完成事件
        const handleGLReloaded = (event: Event) => {
            console.log('监听到GL库重载完成事件:', (event as any).detail || {});

            // 在库重载完成后刷新图表
            if (chartInstance && !chartInstance.isDisposed() && option && currentIs3D && !isRebuildingRef.current) {
                try {
                    console.log('GL库重载完成，刷新图表');
                    chartInstance.resize();
                    const validConfig = validateAndFixConfig(option);
                    // 使用增强版配置应用函数
                    applyConfigToChart(chartInstance, validConfig);
                } catch (err) {
                    console.error('GL库重载后刷新图表失败:', err);
                }
            }
        };

        // 注册事件监听
        window.addEventListener('echarts-gl-loaded', handleGLLoaded);
        window.addEventListener('echarts-gl-reloaded', handleGLReloaded);

        // 清理函数
        return () => {
            window.removeEventListener('echarts-gl-loaded', handleGLLoaded);
            window.removeEventListener('echarts-gl-reloaded', handleGLReloaded);
        };
    }, [chartInstance, option, showLoading, hideLoading, handleChartError, recreateInstance, setOption]);

    // 上次窗口尺寸，避免不必要的更新
    const lastWindowSizeRef = useRef({ width: window.innerWidth, height: window.innerHeight });
    // 记录最后一次resize时间戳 - 移到顶层，修复Hook规则错误
    const lastResizeTimestampRef = useRef(0);

    // 响应窗口大小变化 - 使用更高效的实现
    useEffect(() => {
        const handleResize = () => {
            try {
                // 时间节流，300ms内不重复处理
                const now = Date.now();
                if (now - lastResizeTimestampRef.current < 300) {
                    return;
                }
                lastResizeTimestampRef.current = now;

                // 检查窗口尺寸是否真的变化
                const currentWidth = window.innerWidth;
                const currentHeight = window.innerHeight;
                const lastSize = lastWindowSizeRef.current;

                // 只有当窗口尺寸变化超过一定阈值时才处理
                if (Math.abs(currentWidth - lastSize.width) < 10 &&
                    Math.abs(currentHeight - lastSize.height) < 10) {
                    // 尺寸变化很小，忽略此次resize
                    return;
                }

                // 更新记录的窗口尺寸
                lastWindowSizeRef.current = { width: currentWidth, height: currentHeight };

                // 确保图表容器可见且有尺寸
                if (chartRef.current) {
                    chartRef.current.style.display = 'block';
                    chartRef.current.style.visibility = 'visible';

                    // 减少日志输出，只在开发环境记录
                    if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
                        console.log('窗口大小变化, 容器尺寸:', {
                            clientWidth: chartRef.current.clientWidth,
                            clientHeight: chartRef.current.clientHeight
                        });
                    }

                    // 如果容器尺寸为0，设置绝对尺寸
                    if (chartRef.current.clientWidth === 0 || chartRef.current.clientHeight === 0) {
                        chartRef.current.style.width = '400px';
                        chartRef.current.style.height = '300px';
                    }
                }

                // 使用requestAnimationFrame在下一帧执行resize，避免闪烁
                requestAnimationFrame(() => {
                    try {
                        resize();
                    } catch (error) {
                        console.error('resize操作失败:', error);
                    }
                });
            } catch (error) {
                console.error('窗口大小变化处理失败:', error);
            }
        };

        // 使用防抖函数包装resize处理，大幅延长时间间隔减少触发频率
        let resizeTimer: number | null = null;
        const debouncedResize = () => {
            if (resizeTimer) {
                clearTimeout(resizeTimer);
            }
            resizeTimer = window.setTimeout(handleResize, 300); // 增加延迟到300ms，大幅减少触发频率
        };

        // 使用 TransitionEvent 代替频繁的 resize 事件
        // 这只会在元素大小变化完成后触发一次，减少不必要的执行
        const handleTransitionEnd = (e: TransitionEvent) => {
            // 只处理与大小相关的过渡
            if (e.propertyName.includes('width') || e.propertyName.includes('height')) {
                handleResize();
            }
        };

        window.addEventListener('resize', debouncedResize);

        // 如果图表容器存在，添加过渡结束事件监听
        if (chartRef.current) {
            chartRef.current.addEventListener('transitionend', handleTransitionEnd);
        }

        return () => {
            if (resizeTimer) {
                clearTimeout(resizeTimer);
            }
            window.removeEventListener('resize', debouncedResize);

            if (chartRef.current) {
                chartRef.current.removeEventListener('transitionend', handleTransitionEnd);
            }
        };
    }, [resize]);

    // 根据加载状态显示或隐藏加载动画
    useEffect(() => {
        if (loading && chartInstance) {
            showLoading();
        } else if (chartInstance) {
            hideLoading();
        }
    }, [loading, chartInstance, showLoading, hideLoading]);

    // 初始化图表 - 只执行一次
    useEffect(() => {
        console.log('初始化图表useEffect运行, chartInstance:', !!chartInstance, 'initialRenderRef:', initialRenderRef.current, '初始化次数:', initializationCountRef.current);

        // 增加初始化计数
        initializationCountRef.current += 1;

        // 确保图表实例已创建
        if (chartInstance) {
            // 设置initialRenderRef为true，标记初始化已完成
            initialRenderRef.current = true;

            // 执行一次resize确保尺寸正确
            if (chartRef.current && chartRef.current.clientWidth > 0 && chartRef.current.clientHeight > 0) {
                console.log('初始化完成，执行一次resize');
                setTimeout(() => {
                    if (chartInstance && !chartInstance.isDisposed()) {
                        chartInstance.resize();

                        // 页面加载后强制应用配置，确保图表正确渲染
                        if (option && Object.keys(option).length > 0) {
                            console.log('初始化时应用图表配置');
                            try {
                                // 验证并修复配置
                                const validConfig = validateAndFixConfig(option);

                                // 检查是否是3D图表类型
                                const is3DChart = is3DChartType(validConfig.type || '');

                                if (is3DChart) {
                                    // 如果是3D图表，确保GL库已加载
                                    ensureEChartsGLLoaded()
                                        .then(success => {
                                            if (success && chartInstance && !chartInstance.isDisposed()) {
                                                console.log('3D库加载成功，初始化应用配置');
                                                setOption(validConfig, true);
                                            }
                                        })
                                        .catch(err => {
                                            console.error('3D库加载失败:', err);
                                        });
                                } else {
                                    // 非3D图表直接应用配置
                                    setOption(validConfig, true);
                                }
                            } catch (error) {
                                console.error('初始化应用配置失败:', error);
                            }
                        } else {
                            // 如果没有配置，应用默认图表
                            console.log('没有初始配置，应用默认图表');
                            const defaultConfig = defaultConfigRef.current;
                            setOption(defaultConfig, true);
                        }
                    }
                }, 100);
            }
        }
    }, [chartInstance, option, setOption]);

    // 添加页面可见性变化监听
    useEffect(() => {
        // 页面从隐藏变为可见时刷新图表
        const handleVisibilityChange = () => {
            if (document.visibilityState === 'visible' && chartInstance && !chartInstance.isDisposed()) {
                console.log('页面变为可见，刷新图表实例');
                // 短暂延迟确保DOM已完全恢复
                setTimeout(() => {
                    if (chartInstance && !chartInstance.isDisposed() && chartRef.current) {
                        // 检查容器尺寸
                        if (chartRef.current.clientWidth > 0 && chartRef.current.clientHeight > 0) {
                            chartInstance.resize();

                            // 重新应用当前配置
                            if (option && Object.keys(option).length > 0) {
                                setOption(option, true);
                            }
                        }
                    }
                }, 200);
            }
        };

        document.addEventListener('visibilitychange', handleVisibilityChange);

        // 清理函数
        return () => {
            document.removeEventListener('visibilitychange', handleVisibilityChange);
        };
    }, [chartInstance, option, setOption]);

    // 记录3D图表加载状态
    const is3DLoadingRef = useRef(false);

    // 页面初始加载处理
    useEffect(() => {
        if (!chartInstance || chartInstance.isDisposed()) {
            return;
        }

        console.log('页面初始加载处理');

        // 创建一个定时器，在页面加载后检查图表是否已渲染
        const initialLoadTimer = setTimeout(() => {
            if (chartInstance && !chartInstance.isDisposed() && chartRef.current) {
                try {
                    // 检查当前图表是否有配置
                    let currentOption: any;
                    try {
                        currentOption = chartInstance.getOption();
                    } catch (e) {
                        console.log('获取当前图表配置失败，可能图表尚未渲染', e);
                        currentOption = null;
                    }

                    // 如果没有配置或配置为空，应用默认配置
                    const hasValidConfig = currentOption &&
                        Object.keys(currentOption).length > 0 &&
                        (currentOption.series || currentOption.radar);

                    if (!hasValidConfig) {
                        console.log('页面初始加载：检测到图表未渲染，应用配置');

                        // 优先使用已提供的配置
                        if (option && Object.keys(option).length > 0) {
                            console.log('应用已提供的配置');
                            setOption(option, true);
                        } else {
                            // 没有配置时使用默认配置
                            console.log('应用默认配置');
                            setOption(defaultConfigRef.current, true);
                        }

                        // 强制一次resize确保尺寸正确
                        setTimeout(() => {
                            if (chartInstance && !chartInstance.isDisposed()) {
                                chartInstance.resize();
                            }
                        }, 100);
                    }
                } catch (error) {
                    console.error('页面初始加载处理错误:', error);
                }
            }
        }, 800);

        // 监听3D库加载完成事件
        const handleGLLoaded = () => {
            console.log('收到3D库加载完成事件');
            setTimeout(() => {
                if (chartInstance && !chartInstance.isDisposed() && option) {
                    const is3DChart = option.type && is3DChartType(option.type);
                    if (is3DChart) {
                        console.log('3D库加载完成，重新应用3D配置');
                        setOption(option, true);
                    }
                }
            }, 100);
        };

        window.addEventListener('echarts-gl-loaded', handleGLLoaded);

        return () => {
            clearTimeout(initialLoadTimer);
            window.removeEventListener('echarts-gl-loaded', handleGLLoaded);
        };
    }, [chartInstance, chartRef, option, setOption]);

    // 统一图表样式处理
    useEffect(() => {
        if (!chartRef.current) return;

        // 设置图表容器样式
        Object.assign(chartRef.current.style, {
            width: width,
            height: height,
            minWidth: '300px',
            minHeight: '250px',
            position: 'relative',
            display: 'block',
            padding: '0',
            margin: '0',
            boxSizing: 'border-box'
        });

        // 如果容器尺寸为0，强制设置尺寸
        if (chartRef.current.clientWidth === 0 || chartRef.current.clientHeight === 0) {
            console.log('图表容器尺寸无效，设置默认尺寸');
            chartRef.current.style.width = typeof width === 'string' ? width : '400px';
            chartRef.current.style.height = typeof height === 'string' ? height : '300px';
        }

        // 特别处理3D图表的样式
        if (isCurrent3D) {
            // 3D图表需要更大的渲染空间和更好的性能
            Object.assign(chartRef.current.style, {
                overflow: 'hidden',
                backfaceVisibility: 'hidden',
                webkitBackfaceVisibility: 'hidden',
                willChange: 'transform', // 优化性能
            });
        }
    }, [width, height, isCurrent3D]);

    // 图表容器样式
    const containerStyle: React.CSSProperties = {
        width,
        height,
        position: 'relative',
        ...style
    };

    // 监听图表实例重建事件
    useEffect(() => {
        const handleInstanceRecreated = () => {
            console.log('图表实例已重建，开始应用配置');
            // 短暂延迟确保实例已完全初始化
            setTimeout(() => {
                try {
                    if (option && chartRef.current) {
                        // 获取新的实例引用
                        const chartDom = chartRef.current;
                        const newInstance = (window as any).echarts?.getInstanceByDom(chartDom);

                        if (newInstance) {
                            console.log('成功获取新图表实例引用');
                            // 更新实例引用
                            if (onChartReady) onChartReady(newInstance);

                            // 处理新配置
                            if (is3DChartType(option.type || '')) {
                                console.log('应用3D图表配置到新实例');
                                // 确保3D库已加载
                                ensureEChartsGLLoaded()
                                    .then(() => {
                                        try {
                                            // 应用验证后的配置
                                            const validConfig = validateAndFixConfig(option);
                                            newInstance.setOption(validConfig, true);
                                            newInstance.resize();
                                        } catch (e) {
                                            console.error('应用3D配置到新实例失败:', e);
                                        }
                                    });
                            } else {
                                console.log('应用非3D图表配置到新实例');
                                try {
                                    // 应用验证后的配置
                                    const validConfig = validateAndFixConfig(option);
                                    newInstance.setOption(validConfig, true);
                                    newInstance.resize();
                                } catch (e) {
                                    console.error('应用非3D配置到新实例失败:', e);
                                }
                            }
                        }
                    }
                } catch (error) {
                    console.error('实例重建后应用配置失败:', error);
                }
            }, 100);
        };

        window.addEventListener('echarts-instance-recreated', handleInstanceRecreated);

        return () => {
            window.removeEventListener('echarts-instance-recreated', handleInstanceRecreated);
        };
    }, [option, onChartReady]);

    // 添加更多的事件监听，用于诊断问题
    useEffect(() => {
        // 创建一组事件处理器
        const eventHandlers = {
            'echarts-gl-cleanup-start': (event: any) => {
                console.log('[诊断] GL清理开始:', event.detail);
            },
            'echarts-gl-cleanup-complete': (event: any) => {
                console.log('[诊断] GL清理完成:', event.detail);
            },
            'echarts-gl-reloaded': (event: any) => {
                console.log('[诊断] GL库重新加载:', event.detail);
                // 在GL库重载后，尝试刷新当前图表
                if (chartInstance && !chartInstance.isDisposed() && option) {
                    try {
                        // 设置一个延迟，确保GL组件完全初始化
                        setTimeout(() => {
                            if (chartInstance && !chartInstance.isDisposed()) {
                                console.log('[诊断] GL库重载后刷新图表');
                                try {
                                    // 先执行resize确保容器正确
                                    chartInstance.resize();
                                    // 然后应用配置
                                    const validConfig = validateAndFixConfig(option);
                                    chartInstance.setOption(validConfig, true);
                                } catch (e) {
                                    console.error('[诊断] GL库重载后刷新图表失败:', e);
                                }
                            }
                        }, 200);
                    } catch (error) {
                        console.error('[诊断] GL库重载后处理失败:', error);
                    }
                }
            }
        };

        // 注册所有事件处理器
        Object.entries(eventHandlers).forEach(([event, handler]) => {
            window.addEventListener(event, handler);
        });

        // 清理函数
        return () => {
            Object.entries(eventHandlers).forEach(([event, handler]) => {
                window.removeEventListener(event, handler);
            });
        };
    }, [chartInstance, option]);

    // 添加额外的副作用处理，清除3D图表对象缓存
    useEffect(() => {
        // 监听页面显示/隐藏状态变化
        const handleVisibilityChange = () => {
            if (document.visibilityState === 'visible') {
                // 仅当图表存在且为3D图表时考虑刷新
                if (is3DChartType(option?.type || '') && chartInstance && !chartInstance.isDisposed()) {
                    console.log('页面重新可见，3D图表检测 - 执行刷新');

                    // 检查图表是否正常渲染
                    const canvas = chartRef.current?.querySelector('canvas');
                    if (!canvas || canvas.width === 0 || canvas.height === 0) {
                        console.log('检测到3D图表canvas无效，需要重建');
                        setChartVisible(false);
                        setTimeout(async () => {
                            try {
                                await recreateInstance();
                                setChartVisible(true);
                            } catch (e) {
                                console.error('页面可见性变化后重建图表失败:', e);
                            }
                        }, 300);
                    } else {
                        // Canvas有效，仅执行resize和重新应用配置
                        console.log('3D图表canvas有效，仅执行刷新而非重建');
                        setTimeout(() => {
                            if (chartInstance && !chartInstance.isDisposed() && option) {
                                try {
                                    // 清除任何挂起的渲染
                                    chartInstance.clear();
                                    // 执行resize确保尺寸正确
                                    chartInstance.resize();
                                    // 应用当前配置
                                    const validConfig = validateAndFixConfig(option);
                                    chartInstance.setOption(validConfig, true);
                                } catch (e) {
                                    console.warn('页面可见性变化后刷新图表失败:', e);
                                }
                            }
                        }, 200);
                    }
                }
            }
        };

        // 处理浏览器窗口激活事件
        const handleFocus = () => {
            // 浏览器窗口重新获得焦点时，仅检查3D图表是否需要刷新，而非重建
            if (is3DChartType(option?.type || '') && chartInstance && !chartInstance.isDisposed()) {
                console.log('窗口重新获得焦点，检查3D图表状态');

                // 检查图表是否正常渲染
                const canvas = chartRef.current?.querySelector('canvas');
                if (!canvas || canvas.width === 0 || canvas.height === 0) {
                    console.log('检测到3D图表canvas无效，需要执行重建');
                    setChartVisible(false);
                    setTimeout(async () => {
                        try {
                            await recreateInstance();
                            setChartVisible(true);
                        } catch (e) {
                            console.error('窗口焦点变化后重建图表失败:', e);
                        }
                    }, 300);
                } else {
                    // Canvas有效，仅执行resize
                    console.log('3D图表canvas有效，仅执行resize刷新');
                    if (chartInstance && !chartInstance.isDisposed()) {
                        try {
                            chartInstance.resize();
                        } catch (e) {
                            console.warn('窗口焦点变化后resize失败:', e);
                        }
                    }
                }
            }
        };

        // 注册事件监听
        document.addEventListener('visibilitychange', handleVisibilityChange);
        window.addEventListener('focus', handleFocus);

        return () => {
            document.removeEventListener('visibilitychange', handleVisibilityChange);
            window.removeEventListener('focus', handleFocus);
        };
    }, [option, chartInstance, recreateInstance]);

    return (
        <div className={`chart-renderer-container ${className || ''}`} style={containerStyle}>
            {renderError ? (
                <div className="chart-error">
                    <h3>图表渲染错误</h3>
                    <p>{renderError.message}</p>
                    {renderError.details && (
                        <details>
                            <summary>详细信息</summary>
                            <pre>{renderError.details}</pre>
                        </details>
                    )}
                </div>
            ) : (
                <React.Fragment>
                    {(loading || is3DLoading) && <ChartLoading visible={true} text={is3DLoading ? "正在加载3D组件..." : "加载中..."} />}
                    <div
                        ref={chartRef}
                        className="chart-container"
                        style={{
                            width: '100%',
                            height: '100%',
                            visibility: (loading || is3DLoading || !chartVisible) ? 'hidden' : 'visible'
                        }}
                    />
                </React.Fragment>
            )}
        </div>
    );
};

export default ChartRenderer;